<template>
    <a-form :form="form" @submit="onFormSubmit">
        <a-form-item label="服务名称"
                     :label-col="fromLayout.labelCol"
                     :wrapper-col="fromLayout.wrapperCol">
            <a-input placeholder="请输入" autocomplete="off"
                     v-decorator="[
                        'routeName',
                        { rules: [{ required: true, message: '请输入路由名称' }] }
                     ]"
            />
        </a-form-item>
        <a-form-item label="URI"
                     :label-col="fromLayout.labelCol"
                     :wrapper-col="fromLayout.wrapperCol">
            <a-input placeholder="请输入" autocomplete="off"
                     v-decorator="[
                            'uri',
                            { rules: [{ required: true, message: '请输入URI' }] }
                        ]"
            />
        </a-form-item>
        <a-form-item label="谓词"
                     :label-col="fromLayout.labelCol"
                     :wrapper-col="fromLayout.wrapperCol">
            <a-textarea placeholder="请输入" autocomplete="off"
                        v-decorator="[
                            'predicates',
                            { rules: [{ required: true, message: '请输入谓词配置' }] }
                        ]"
            />
        </a-form-item>
        <a-form-item label="过滤器"
                     :label-col="fromLayout.labelCol"
                     :wrapper-col="fromLayout.wrapperCol">
            <a-textarea placeholder="请输入" autocomplete="off"
                        v-decorator="[
                            'filters',
                            { rules: [{ required: true, message: '请输入过滤器配置' }] }
                        ]"
            />
        </a-form-item>
        <a-button type="primary" html-type="submit" block>提交</a-button>
    </a-form>
</template>

<script>
    import { addGatewayRoute } from '../../../apis/system';
    export default {
        data(){
            return {
                form : this.$form.createForm(this),
                fromLayout : {
                    labelCol : { span : 5 },
                    wrapperCol : { span : 19 }
                }
            }
        },
        methods : {
            /**
             * 监听表单提交
             * @param e
             */
            onFormSubmit : function (e) {
                e.preventDefault();
                let $this = this;
                this.form.validateFields((err, params) => {
                    if (!err) {
                        addGatewayRoute(params).then(() => {
                            $this.$message.success("保存成功").then();
                            $this.$router.push({
                                name : 'dynamicRoute',
                                query : { reload : new Date().getTime().toString() }
                            }).then();
                        });
                    }
                });
            }
        }
    }
</script>
